<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>CSS Toggle Switch: Accessible CSS toggle switch using standard form controls, with Bootstrap</title>
	<meta name="description" content="Accessible, screen-reader friendly, CSS-only toggle switches with full keyboard access and mobile support, using standard form controls.">
	<meta name="author" content="Ionuț Colceriu">

	<!-- Docs styles, not required by the switches -->
	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
	<link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="dist/docs/docs.css">

	<!-- Toggle Switch -->
	<link rel="stylesheet" href="dist/toggle-switch.css">

	<!-- Prism Syntax Highlighter -->
    <link rel="stylesheet" href="bower_components/prism/themes/prism.css">
    <link rel="stylesheet" href="bower_components/prism/themes/prism-okaidia.css">
    <script src="bower_components/prism/prism.js"></script>
</head>
<body>

	 <header class="row">
		<div class="col-lg-7">
			<h1>
				<a href="index.html">CSS Toggle Switch</a>
			</h1>
			<p class="description">Accessible CSS toggle switch using standard form controls</p>
		</div>
		<div class="col-lg-5">
			<ul class="list-inline top-menu">
				<li><a href="index.html">Standalone</a></li>
				<li><a href="bootstrap.html" class="active">Bootstrap</a></li>
				<li><a href="foundation.html">Foundation</a></li>
			</ul>
		</div>
	</header>

	<div class="row">
		<div class="col-lg-12">
			<div class="panel hero-box">

				<div class="row">
					<div class="col-lg-6">

						<h4>Light switch</h4>
						<p>Use the light switch, instead of a checkbox, for simple <em>&ldquo;On/Off&rdquo;</em> options. </p>

						<label class="switch-light well" onclick="">
							<input type="checkbox">
							<span>
								Wireless
								<span>Off</span>
								<span>On</span>
							</span>

							<a class="btn btn-primary"></a>
						</label>

					</div>
					<div class="col-lg-6">

						<h4>Toggle switch</h4>
						<p>Use the toggle switches, instead of radio buttons, for two or more, specific options. </p>

						<div class="row toggle-demo">
							<label class="col-lg-3">View</label>
							<div class="switch-toggle switch-3 well col-lg-9">
								<input id="week-d1" name="view-d" type="radio" checked>
								<label for="week-d1" onclick="">Week</label>

								<input id="month-d2" name="view-d" type="radio">
								<label for="month-d2" onclick="">Month</label>

								<input id="month-d3" name="view-d" type="radio">
								<label for="month-d3" onclick="">Year</label>

								<a class="btn btn-primary"></a>
							</div>
						</div>

					</div>

				</div>

				<div class="row dependency-install">

					<div class="col-lg-12">
						<pre><code><a href="http://bower.io/">bower</a> install --save css-toggle-switch</code></pre>
						<pre><code><a href="http://component.io/">component</a> install ghinda/css-toggle-switch</code></pre>
					</div>

				</div>

				<div class="nav-bar hero-actions">
					<div class="btn-group btn-group-justified">
						<a href="https://github.com/ghinda/css-toggle-switch/archive/gh-pages.zip" class="btn">
							<i class="icon-arrow-down"></i>
							Download
						</a>
						<a href="https://github.com/ghinda/css-toggle-switch" class="btn">
							<i class="icon-github"></i>
							Github
						</a>
					</div>
				</div>

			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-lg-12">

			<h5 class="frameworks text-center">
				You can use the switches <a href="index.html">standalone</a>, with <a href="bootstrap.html">Bootstrap</a> or with <a href="foundation.html">Foundation</a>.
			</h5>

		</div>
	</div>

	<div class="row">

		<div class="col-lg-12">

			<h2>Light switch</h2>
			<p>Use the light switch, instead of a checkbox, for simple <em>&ldquo;On/Off&rdquo;</em> options. </p>

			<div class="example col-lg-12">

				<label class="switch-light well col-lg-3" onclick="">
					<input type="checkbox">
					<span>
						Wireless
						<span>Off</span>
						<span>On</span>
					</span>

					<a class="btn btn-primary"></a>
				</label>

<pre><code class="language-markup">&lt;label class=&quot;switch-light well&quot; onclick=&quot;&quot;&gt;
	&lt;input type=&quot;checkbox&quot;&gt;
	&lt;span&gt;
		Wireless
		&lt;span&gt;Off&lt;/span&gt;
		&lt;span&gt;On&lt;/span&gt;
	&lt;/span&gt;

	&lt;a class=&quot;btn btn-primary&quot;&gt;&lt;/a&gt;
&lt;/label&gt;
</code></pre>

			</div>

		</div>

	</div>

	<div class="row">

		<div class="col-lg-12">

			<h2>Toggle switch</h2>

			<p>Use the toggle switches, instead of radio buttons, for two or more specific options. </p>

			<div class="example">

				<div class="col-lg-5">
					<label>View</label>
					<div class="switch-toggle well">
						<input id="week" name="view" type="radio" checked>
						<label for="week" onclick="">Week</label>

						<input id="month" name="view" type="radio">
						<label for="month" onclick="">Month</label>

						<a class="btn btn-primary"></a>
					</div>
				</div>

<pre><code class="language-markup">&lt;label&gt;View&lt;/label&gt;
&lt;div class=&quot;switch-toggle well&quot;&gt;
	&lt;input id=&quot;week&quot; name=&quot;view&quot; type=&quot;radio&quot; checked&gt;
	&lt;label for=&quot;week&quot; onclick=&quot;&quot;&gt;Week&lt;/label&gt;

	&lt;input id=&quot;month&quot; name=&quot;view&quot; type=&quot;radio&quot;&gt;
	&lt;label for=&quot;month&quot; onclick=&quot;&quot;&gt;Month&lt;/label&gt;

	&lt;a class=&quot;btn btn-primary&quot;&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

			</div>

			<h3>Multiple options</h3>
			<p>You can add up to 5 items by using the <code>.switch-3</code>, <code>.switch-4</code> and <code>.switch-5</code> classes. </p>

			<div class="example">

				<label>View</label>
				<div class="switch-toggle switch-5 well">
					<input id="hour3" name="view3" type="radio" checked>
					<label for="hour3" onclick="">Hour</label>

					<input id="day4" name="view3" type="radio">
					<label for="day4" onclick="">Day</label>

					<input id="week5" name="view3" type="radio">
					<label for="week5" onclick="">Week</label>

					<input id="month6" name="view3" type="radio">
					<label for="month6" onclick="">Month</label>

					<input id="year7" name="view3" type="radio">
					<label for="year7" onclick="">Year</label>

					<a class="btn btn-primary"></a>
				</div>

<pre><code class="language-markup">&lt;label&gt;View&lt;/label&gt;
&lt;div class=&quot;switch-toggle switch-5 well&quot;&gt;
	[&hellip;]
</code></pre>

			</div>

		</div>

	</div>

	<div class="row">

		<div class="col-lg-12">

			<h2>Different looks</h2>

			<p>The switches are very flexible, so you can use and combine a number of classes provided by Bootstrap, along with it's grid, to make them look exactly like you need them. </p>

			<div class="example">

				<div class="row">
					<div class="col-lg-4">
						<label class="switch-light progress" onclick="">
							<input type="checkbox">
							<span>
								Wireless
								<span aria-label="Off" title="Off">O</span>
								<span aria-label="On" title="On">I</span>
							</span>

							<a class="progress-bar"></a>
						</label>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-4">
						<label class="switch-light progress progress-striped active" onclick="">
							<input type="checkbox">
							<span>
								Bluetooth
								<span>Off</span>
								<span>On</span>
							</span>

							<a class="progress-bar progress-bar-success"></a>
						</label>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-4">
						<label>View</label>
						<div class="switch-toggle well">
							<input id="week41" name="view4" type="radio" checked>
							<label for="week41" onclick="">Week</label>

							<input id="month42" name="view4" type="radio">
							<label for="month42" onclick="">Month</label>

							<a class="btn btn-primary disabled"></a>
						</div>
					</div>
				</div>

				<label>View</label>
				<div class="switch-toggle switch-3 alert alert-info">
					<input id="week51" name="view5" type="radio" checked>
					<label for="week51" onclick="">Week</label>

					<input id="month52" name="view5" type="radio">
					<label for="month52" onclick="">Month</label>

					<input id="month53" name="view5" type="radio">
					<label for="month53" onclick="">Year</label>

					<a class="btn btn-primary disabled"></a>
				</div>

				<label>View</label>
				<div class="switch-toggle switch-4 alert alert-success">
					<input id="week61" name="view6" type="radio" checked>
					<label for="week61" onclick="">Week</label>

					<input id="month62" name="view6" type="radio">
					<label for="month62" onclick="">Month</label>

					<input id="year63" name="view6" type="radio">
					<label for="year63" onclick="">Year</label>

					<input id="decade63" name="view6" type="radio">
					<label for="decade63" onclick="">Decade</label>

					<a class="btn btn-default"></a>
				</div>

			</div>

		</div>

	</div>

	<div class="row">
		<div class="col-lg-12">
			<h3>
				<a href="http://getbootstrap.com/" target="_blank">Get Bootstrap.</a>
			</h3>
		</div>
	</div>

	<footer>
		<div class="row">
			<div class="col-lg-12">
				<p>
					<a href="https://github.com/ghinda/css-toggle-switch">CSS Toggle Switch</a> is a project by <a href="http://ghinda.net">Ionuț Colceriu</a>. Follow <a href="https://twitter.com/ghindas">@ghindas</a>.
				</p>
			</div>
		</div>
	</footer>

	<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-19824700-1', 'ghinda.net');
	ga('send', 'pageview');
	</script>

</body>
</html>
